<template>
  <view class="container">

    <view class="form-container">
      <view class="input-group">
        <view class="icon">&#x1F4F1;</view>
        <input class="input" placeholder="请输入手机号" />
        <text class="clear-btn">&#x274C;</text>
      </view>

      <view class="input-group">
        <view class="icon">&#x1F512;</view>
        <input class="input2" placeholder="输入验证码" />
        <button class="get-code-btn">获取验证码</button>
      </view>

      <button class="submit-btn">提交</button>
    </view>
  </view>
</template>

<style>
.container {
  padding: 20rpx;
}

.title {
  color: white;
  font-size: 36rpx;
}

.form-container {
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-top: 20rpx;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 10rpx;
  border-radius: 30rpx;
  background-color: #F2F2F2;
}

.icon {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.input {
  flex: 1;
  padding: 10rpx;
  border: none;
  background-color: transparent;
  background-color: #F2F2F2;
  outline: none;
}

.clear-btn {
  font-size: 28rpx;
  margin-left: 10rpx;
}

.get-code-btn {
  background-color: #007AFF;
  color: white;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  margin-left: 10rpx;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007AFF;
  color: white;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  margin-top: 20rpx;
}
/* 设置 */
.input2{
	flex: 1;
	padding: 10rpx;
	border: none;
	/* background-color: transparent; */
	background-color: #F2F2F2;
	outline: none;
	width: 70%;
}
</style>
